<template>
	<div class="order">
		<div class="head">
			<img src="../../../public/images/o1_1.png" @click="sub()">
			<span>全部订单</span><img src="../../../public/images/o1_2.png" >
		</div>
		<div class="xbox">
			<ul>
				<!-- :class="{ 'default' : iscur===item.id}" @click="iscur = item.id" -->
				<li v-for="item in tabs" :key="item.id"  @click="iscur = item.id">
					{{item.name}}
					<!-- 底部的线 -->
					<span :class="{ 'default-span' : iscur==item.id}"></span>
					<!-- class="default-span" -->
				</li>
			</ul>
		</div>
		<div class="foot">
			<img src="../../../public/images/o1_3.png" >
			<p>这里什么也没有</p>
			<p>继续去探索未知的新世界吧</p>
		</div>
		<BottomNav :propsurl='arrUrl'></BottomNav>
	</div>
</template>

<script>
	import BottomNav from '../default/BottomNav.vue'
	
	export default{
		name:'Order',
		components:{
			BottomNav
		},
		data(){
			return{
				tabs:[
					{id:1,name:'全部'},
					{id:2,name:'待付款'},
					{id:3,name:'已付款'},
					{id:4,name:'待评价'},
					{id:5,name:'退款售后'}
				],
				iscur:1, //默认选中第一个标题
				arrUrl:['igs/1_2.png','igs/2_2.png','igs/3_1.png']
			}
		},
		methods:{
			sub(){
				this.$router.push('/')
			}
		}
	}
</script>

<style scoped>
	.order{
		width: 100%;
		overflow: hidden;
		background-color: #f2f2f2;
	}
	.order .head{
		width: 100%;
		height: 1.2rem;
		display: flex;
		align-items: center;
		background-color: white;
	}
	.order .head img:first-child{
		    width: 0.45rem;
		    height: 0.5rem;
			margin-left: 0.5rem;
	}
	.order .head span{
		display: inline-block;
		margin: 0 auto;
		font-size: 0.45rem;
		font-weight: bold;
	}
	.order .head img:last-child{
		    width: 0.37rem;
		    height: 0.37rem;
			position: absolute;
			left: 6.5rem;
			transform: rotate(-180deg);
	}
	.order .xbox{
		width: 100%;
		overflow: hidden;
		background-color: white;
	}
	.order .xbox ul{
		width: 90%;
		margin: 0 auto;
		height: 1.3rem;
		display: flex;
		text-align: center;
		font-size: 0.35rem;
		align-items: center;
		justify-content: space-between;
	}
	.order .xbox ul li{
		width: 17%;
		height: 0.7rem;
	}
	.order .xbox .default{
		
	}
	.order .xbox .default-span{
		margin-left: 0.25rem;
		display: block;
		background-color: #fff100;
		height: 0.1rem;
		width: 1rem;
		
	}
	.order .foot {
		width: 100%;
		text-align: center;
		height: 15rem;
	}
	.order .foot img{
		display: block;
		width: 62%;
		height: 40%;
		padding-top: 3rem;
		background-size: 100%;
		margin: 0 auto;
	}
	.order .foot p{
		padding-top: 0.2rem;
	}
</style>
